<template>
	<div class="content boxFlex">
		<div class="leftInfo">
			<div class="infoBox" v-cloak>
				<el-image class="headerImg" :src="userInfoDetail.head?userInfoDetail.head:$globalData.defaultImg" fit="cover"></el-image>
				<div class="headerImgText">{{userInfoDetail.name}}</div>
				<ul class="infoListBox">
					<li class="infoItem boxFlex">
						<div class="leftTitle">平台工号</div>
						<div class="infoMsg">{{ userInfoDetail.jobNumber?userInfoDetail.jobNumber:'' }}</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">服务天数</div>
						<div class="infoMsg">{{ userInfoDetail.serviceDays?userInfoDetail.serviceDays:'0' }}天</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">创建团队个数</div>
						<div class="infoMsg">{{ userInfoDetail.createCompanies?userInfoDetail.createCompanies:'0' }}个</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">签约团队数</div>
						<div class="infoMsg">{{ userInfoDetail.joinCompanies?userInfoDetail.joinCompanies:'0' }}个</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">手机号</div>
						<div class="infoMsg">{{ userInfoDetail.phone?userInfoDetail.phone:'' }}</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">服务地址</div>
						<div class="infoMsg" v-if="userInfoDetail.serviceAddress && userInfoDetail.serviceAddress.length > 0">
							<!-- {{ userInfoDetail.serviceAddress?userInfoDetail.serviceAddress[0].name:'' }} -->
							<div class="addressDiv">
								<div class="infoTextMsg" v-for="item in userInfoDetail.serviceAddress">{{ item.addressId }}</div>
							</div>
						</div>
						<div v-else class="infoMsg">
							<span class="infoTextMsg">暂无服务地址</span>
						</div>
					</li>
				</ul>
			</div>
			<div class="infoBox" v-cloak>
				<div class="boxTitle">平台认证</div>
				<ul class="infoListBox">
					<li class="infoItem boxFlex">
						<div class="leftTitle">职级</div>
						<div class="infoMsg" style="position: relative;" v-if="userAuthenticationInformation.rankName">
							<!-- <span class="infoTextMsg">{{ userAuthenticationInformation.rankName.departmentName }}</span> -->
							<span>
								{{ userAuthenticationInformation.userCheckEntity.rankState == 'SUCCESS' ?
									userAuthenticationInformation.rankName.departmentName : userAuthenticationInformation.userCheckEntity.rankState == 'PROCESS' ?
									'审核中' : userAuthenticationInformation.userCheckEntity.rankState == 'FAIL' ?'审核失败':'请前往认证'
									}}
							</span>
							<img class="authenticationImg"
								v-if="userAuthenticationInformation.userCheckEntity.rankState == 'SUCCESS'" 
								src="@/assets/image/working/accomplish.png" alt="">
							<img class="authenticationImg"
								v-if="userAuthenticationInformation.userCheckEntity.rankState == 'PROCESS'" 
								src="@/assets/image/working/await.png" alt="">
							<img class="authenticationImg"
								v-if="userAuthenticationInformation.userCheckEntity.rankState == 'FAIL'" 
								src="@/assets/image/working/failing.png" alt="">
						</div>
						<span v-else class="infoMsg">请前往认证</span>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">身份认证</div>
						<div class="infoMsg" style="position: relative;" v-if="userAuthenticationInformation.userCheckEntity">
							{{ userAuthenticationInformation.userCheckEntity.state == 'SUCCESS' ? 
								userAuthenticationInformation.userCheckEntity.cardId : userAuthenticationInformation.userCheckEntity.state == 'PROCESS' ?
								'审核中' : userAuthenticationInformation.userCheckEntity.state == 'FAIL' ?'审核失败':'请前往认证'
								}}
							<img class="authenticationImg" 
								v-if="userAuthenticationInformation.userCheckEntity.state == 'SUCCESS'" 
								src="@/assets/image/working/accomplish.png" alt="">
							<img class="authenticationImg"
								v-if="userAuthenticationInformation.userCheckEntity.state == 'PROCESS'" 
								src="@/assets/image/working/await.png" alt="">
							<img class="authenticationImg"
								v-if="userAuthenticationInformation.userCheckEntity.state == 'FAIL'" 
								src="@/assets/image/working/failing.png" alt="">
						</div>
						<span v-else class="infoMsg">请前往认证</span>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">岗位</div>
						<div class="infoMsg" v-if="userAuthenticationInformation.postName && userAuthenticationInformation.postName.length > 0">
							<!-- <div class="addressDiv"> -->
								<div class="infoTextMsg" v-for="item in userAuthenticationInformation.postName">{{ item.labelName }}</div>
							<!-- </div> -->
						</div>
						<div v-else class="infoMsg">
							<span class="infoTextMsg">暂无岗位</span>
						</div>
					</li>
				</ul>
				<div class="authenticationBox">
					<el-button type="primary" round class="authentication" @click="applyFor()">申请/修改个人认证</el-button>
				</div>
			</div>
			<div class="infoBox" v-cloak>
				<div class="boxTitle">主团队认证</div>
				<ul class="infoListBox" v-if="teamInfo">
					<li class="infoItem boxFlex">
						<div class="leftTitle">主团队</div>
						<div class="infoMsg">{{ teamInfo.companyId }}</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">部门</div>
						<div class="infoMsg">{{ teamInfo.departmentId?teamInfo.departmentId:'暂无部门' }}</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">职位</div>
						<div class="infoMsg">{{ teamInfo.dutiesName }}</div>
					</li>
					<li class="infoItem boxFlex">
						<!-- <div class="leftTitle">组织机构代码</div> -->
						<div class="leftTitle">组织代码</div>
						<div class="infoMsg">{{ teamInfo.organizationCode }}</div>
					</li>
					<li class="infoItem boxFlex">
						<div class="leftTitle">团队地址</div>
						<div class="infoMsg" v-if="teamInfo.address && teamInfo.address.length > 0">
						<div class="addressDiv">
							<div class="infoTextMsg" v-for="item in teamInfo.address">{{ item.addressId }}</div>
						</div>
						</div>
						<div v-else class="infoMsg">
							<span class="infoTextMsg">暂无团队地址</span>
						</div>
					</li>
				</ul>
				<div v-else class="noTeam" @click="$router.push('/myteam/teaminfo/creationteam')">请先加入或创建</div>
			</div>
			<div class="infoBox" v-cloak>
				<div class="boxTitle">我的团队</div>
				<ul class="infoListBox" v-if="teamList && teamList.length > 0">
					<li class="infoItem boxFlex" v-for="item in teamList" :key="item.id">
						<div class="leftTeamTitle">
							{{ item.labelName }}
						</div>
						<div class="infoMsg">{{ item.dutiesName }}</div>
					</li>
				</ul>
				<div v-else class="noTeam" @click="$router.push('/myteam/teaminfo/creationteam')">请先加入或创建</div>
			</div>
		</div>
		<div class="rightContent">
			<el-carousel trigger="click" class="carousel">
			      <el-carousel-item v-for="item in bannerList" :key="item.id">
			        <el-image class="carouselImage" @click="bannerClick(item.bannerUrl)" :src="item.bannerImage?item.bannerImage:$globalData.defaultImg" fit="cover"></el-image>
			      </el-carousel-item>
			    </el-carousel>
			<div class="functionBox">
				<fonctionList v-if="fonctionCut" :key="fonctionKey"></fonctionList>
				<editorfonction v-else :key="fonctionKey"></editorfonction>
			</div>
		</div>
	</div>
</template>

<script>
	import fonctionList from './components/fonctionList.vue'
	import editorfonction from './components/editorfonction.vue'
	
	export default{
		components:{
			fonctionList,
			editorfonction
		},
		data(){
			return{
				userId: '',
				userInfoDetail: '', // 基本信息
				userAuthenticationInformation: '', // 个人认证
				teamInfo: '' , // 团队认证
				teamList: '', // 当前用户所有团队
				companyId: '', // 主团队id
				bannerList: '',
				addressBook: '' , // 通讯录列表
				roleMenu: '' ,// 快捷入口列表
				
				fonctionCut: true,
				fonctionKey: ''
			}
			
		},
		created() {
			this.$store.commit('set_navIndex', 0)
			this.$store.commit('set_lowerIsShow', false)
			this.$store.commit('set_lowerIndex', '')
		},
		computed: {
			monitor () {
				return this.$store.state.company.companyId
			}
		},
		watch:{
			monitor (newData) {
				this.companyId = newData
				this.fonctionKey = new Date().getTime()
				this.getCompanyByUser()
				this.getUserInfoDetail()
				this.getUserAuthenticationInformation()
			}
		},
		mounted() {
			let store = this.$store.state.user
			// console.log(this.$store.state)
			this.userId = store.userInfo.id
			this.addressBook = store.addressBook
			this.roleMenu = store.roleMenu
			if(this.userId && this.userId != undefined){
				this.getCompanyByUser()
				this.getUserInfoDetail()
				this.getUserAuthenticationInformation()
				// webSocket.initWebSocket('192.168.0.114:9081', this.userId);
			}
		},
		methods:{
			getUserInfoDetail(){
				// 功能入口获取用户信息
				this.$request.postForm(this.$api.getUserInfoDetail, {
					userId: this.userId
				}).then( res => {
					if(res.code == 200){
						this.userInfoDetail = res.data
						this.userInfoDetail.joinCompanies = parseInt(this.userInfoDetail.joinCompanies)
					}
				})
			},
			getUserAuthenticationInformation(){
				// 获取用户认证信息
				// getDetails
				this.$request.postForm(this.$api.userAuthenticationInformation, {
					userId: this.userId
				}).then( res => {
					if(res.code == 200){
						this.userAuthenticationInformation = res.data
					}
				})
			},
			getCompanyInformation(){
				 // 获取团队认证信息
				 this.$request.postForm(this.$api.companyInformation, {
				 	userId: this.userId,
					companyId: this.companyId
				 }).then( res => {
				 	if(res.code == 200){
				 		this.teamInfo = res.data
				 	}
				 })
			},
			getCompanyByUser(){
				// 获取团队认证信息
				this.$request.postForm(this.$api.getCompanyByUser, {
					userId: this.userId,
				}).then( res => {
					if(res.code == 200){
						this.teamList = res.data
						// console.log(this.teamList)
						if(!this.companyId){
							this.$store.commit('set_companyList', this.teamList)
							this.teamList.forEach((v)=>{
								if(v.principal == '1'){
									this.companyId = v.id
									this.$store.commit('set_companyName', v.labelName)
								} else {
									this.companyId = this.teamList[0].id
									this.$store.commit('set_companyName', this.teamList[0].labelName)
								}
							})
						}
							setTimeout(()=>{
								this.getCompanyInformation()
								this.getCompanyBanner()
								this.$store.commit('set_companyId', this.companyId)
								this.teamList.forEach((v)=>{
									if(v.id == this.companyId){
										this.companyId = v.id
										this.$store.commit('set_companyName', v.labelName)
									}
								})
							},200)
					}
				})
			},
			getCompanyBanner(){
				// 获取公司轮播图
				this.$request.postForm(this.$api.getCompanyBanner, {
					companyId: this.companyId
				}).then( res => {
					if(res.code == 200){
						this.bannerList = res.data
					}
				})
			},
			bannerClick(url){
				// 轮播图点击事件
				if(url){
					window.open(url)
				}
			},
			//点击申请身份认证
			applyFor(){
				this.$router.push('/addresslist/interior/authentication')
			}
		}
	}
</script>

<style scoped="scoped">
	.content{
		padding: 30px 0;
		background: #FFFFFF;
	}
	.leftInfo{
		width: 300px;
		padding: 0 30px;
		border-right: 1px dotted #DCDCDC;
	}
	.rightContent{
		width: 900px;
		padding: 0 30px;
	}
	.infoBox{
		padding-bottom: 20px;
		border-bottom: 1px solid #DCDCDC;
		margin-bottom: 30px;
	}
	.infoBox:last-child{
		border: none;
	}
	.headerImg{
		width: 100px;
		height: 100px;
		border-radius: 8px;
		margin-left: -50px;
		position: relative;
		left: 50%;
		margin-bottom: 15px;
	}
	.headerImgText{
		text-align: center;
		color: #222222;
		font-size: 16px;
		margin-bottom: 50px;
	}
	.infoListBox{
		width: 100%;
		font-size: 14px;
		color: #131313;
	}
	.infoItem{
		margin-bottom: 20px;
	}
	.infoItem:last-child{
		margin-bottom: 0;
	}
	.infoMsg{
		color: #959595;
		width: 180px;
		text-align: right;
		
	}
	.starImg{
		width: 18px;
		height: 18px;
		margin-left: 2px;
	}
	.boxTitle,.functionTitle{
		color: #333333;
		font-size: 16px;
		margin-bottom: 20px;
	}
	.cardImg{
		width: 270px;
		height: 165px;
		border-radius: 8px;
		margin-left: 45px;
		margin-bottom: 25px;
	}
	
	
	
	.authenticationBox{
		text-align: center;
	}
	.authentication{
		margin-top: 30px;
	}
	.principal{
		color: #23B14D;
	}
	/**
	 * 轮播图
	 */
	.carousel{
		margin-bottom: 30px;
		height: 240px;
	}
	.content>>>.el-carousel__container{
		height: 240px !important;
	}
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 240px;
	    margin: 0;
	  }
	 
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
	  /**
	   * 轮播图-end
	   */
	  /* .functionList{
		  width: 100%;
		 
	  }
	   .functionList ul{
		   display: flex;
		   justify-content: start;
		   flex-wrap: wrap;
		   flex-direction: row;
	   }
	  .functionList li{
		  width: 150px;
		  height: 60px;
		  padding: 10px;
		  margin-left: 40px;
		  display: flex;
		  justify-content: space-between;
		  flex-wrap: nowrap;
		  align-items: center;
		  border-radius: 8px;
		  border: 1px solid #DCDCDC;
		  cursor: pointer;
		  margin-bottom: 30px;
	  }
	  .functionList li:hover{
		  border-color: #23B14D;
	  }
	  .functionList li:nth-child(4n+1){
		  margin-left: 0;
	  }
	  .listImage{
		  width: 40px;
		  height: 40px;
		  margin-right: 10px;
	  }
	  .listTitle{
		  font-size: 16px;
		  color: #222222;
	  } */
	  .leftTitle{
		  width: 100px;
	  }
	  .leftTeamTitle{
		  width: 300px;
	  }
	  .textLeft{
		  text-align: justify;
	  }
	  .carouselImage{
		  width: 100%;
		  height: 100%;
		  cursor: pointer;
	  }
	  .authenticationImg{
		  margin-left: 5px;
		  width: 14px;
		  height: 14px;
		  vertical-align: middle;
		  /* float: right; */
		  margin-top: 3px;
		  position: absolute;
		  top: 0;
		  right: -20px;
	  }
	  .infoTextMsg{
		  /* padding-left: 5px; */
		  position: relative;
		  /* text-align: left; */
	  }
	  .addressDiv{
		  text-align: justify;
	  }
	  .infoTextMsg:nth-child(1){
	  		padding-left: 0px;
	  }
	  .infoTextMsg::before{
		  content: '';
		  position: absolute;
		  left: -1px;
	  }
	  .infoTextMsg:nth-child(1)::before{
		  display: none;
	  }
	  .noTeam{
		  text-align: center;
		  color: #959595;
		  font-size: 12px;
		  margin-top: 20px;
		  cursor: pointer;
	  }
	 /* .downloadBox{
		  width: 100%;
		  text-align: right;
		  color: #AAAAAA;
		  font-size: 12px;
		  display: flex;
		  flex-wrap: nowrap;
		  justify-content: flex-end;
		  margin-top: 20px;
	  }
	  .downloadBox span{
		  margin-left: 40px;
		  cursor: pointer;
		  position: relative;
	  }
	  .downloadBox span:nth-child(1)::after{
		  position: absolute;
		  content: '';
		  width: 1px;
		  height: 16px;
		  background: #AAAAAA;
		  right: -20px;
	  }
	  .downloadBox img{
		  float: left;
		  width: 14px;
		  height: 14px;
		  margin-right: 5px;
	  } */
</style>
<style>
	.el-carousel__container{
			  border-radius: 5px;
			  overflow: hidden;
	}
	.el-carousel__indicators--outside{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
